<docs>
  ## 灵活保险补贴预约第一步
</docs>
<template>
  <div>
    <mheader type="index" @back_btn="goBack()" title="档案服务预约"></mheader>
    <!-- 选择地区开始 -->
    <div class="choice">
      <co-form :model="data" :rules="rules" ref="form">
        <co-select prop="yyjg" label="预约机构" v-model="data.jgid"
        :list="yyjgList" attrid="jgid" attrname="jgmc"></co-select>
        <div v-show="yyflag" class="yyrs">预约机构: {{this.data.jgmc}}</div>
        <co-select prop="yynr" v-show="yyflag" label="预约内容" v-model="data.yynr"
        :list="yynrList" ></co-select>
        <div v-show="yyrsflag" class="yyrs"> {{yyrs}}人数 1 人 </div>
        <date-select prop="yysj" v-show="timeflag" :list="yytimeList" ref="yysjDate"
        v-model="yysj"></date-select>
        <p v-show="timeflag" class="_tip">{{tip}}</p>
      </co-form>
    </div>
    <!-- 下一步 -->
    <div class="next-step">
      <button class="btn btn-primary" @click="nextStep">提交</button>
    </div>
    <!-- 申请成功或失败提示 -->
    <message-card :visible.sync="save.visible"
    :title="save.title" :btn-text="save.btnText"
    :btn-type="save.btnType" @btnClick="msgBtn" @iconCloseClick="iconCloseClick"
    :type="save.type ? 'success' : 'fail'">
      <div class="msg-success" v-if="save.type">
        <p class="_title">{{msgTitle}}</p>
      </div>
      <div class="msg-fail" v-else>
        <p class="title">{{msgTitle}}</p>
      </div>
    </message-card>
  </div>
</template>
<script>
import Mheader from '@/ldry/group/mheader/mheader';
import coForm from '@/base/form/form';
import coInput from '@/base/form/input';
import coSelect from '@/base/form/select';
import coUpload from '@/base/upload/upload';
import dateSelect from '@/ldry/group/dateSelect/dateSelect';
import $ from 'common/js/axios';
import { validator } from 'common/js/valid';
import { mixinValid } from 'common/mixins/mixins';
import MessageCard from '@/ldry/group/messageCard/messageCard';

export default {
  components: { coForm, MessageCard, coInput, coSelect,coUpload, Mheader, dateSelect},
  name: 'reverseOne',
  mixins: [mixinValid],
  data() {
    return {
      // jgmcflag:false,//机构名称标识
      yyflag: false, //预约内容
      tip:"",//提示内容
      yyrsflag: false,
      yyrs:"",
      timeflag:false, //时间标识
      yysj: {},//时间数据
      data: {
        jgmc:"",//机构名称
        dcrs: "1",//人数 1 人
        jgid:"",
        yynr: '',//预约内容
        swxw:"",//时间上午，下午
        yyrq: ""
      },
      rules: {
        yyjg: validator('10,"full","预约机构",false'),
        yynr: validator('2,"full","预约内容",false'),
        yysj: validator('128,"full","预约时间",false')
      },
      save: {
        type: '',
        btnText: '',
        btnType: '',
        title: '',
        visible: false
      },
      msgTitle: '',
      yyjgList: [],
      yynrList:[],
      datelist:[],
      yytimeList:[] //预约时间
    };
  },
  watch: {
    'data.jgid':function(val){
      this.yyflag = true;
      if (val == "") {
        this.timeflag = false; //时间
        this.yyflag = false; //预约内容
        this.yyrsflag = false; //预约人数
        this.yysj = '';
        this.data.yynr = '';
        return
      }
      $.get('/dafwgl/yynrCx?jgid='+val).then((result) => {
        var res = result.returnData;
        if (res.executeResult == '1') {
          this.yynrList = res.yynr;
          if (val != '0000950031') {
            this.yynrList.pop()
          }
        }
      });
      this.yyjgList.filter((item,i)=>{
        if (item.jgid == val) {
          this.data.jgmc = item.jgmc
        }
        return this.data.jgmc
      })
    },
    'data.yynr':function(val){
      if (val == "") {
        this.timeflag = false; //时间
        this.yyrsflag = false;
        this.yysj = ''
        return false
      }
      const data = {jgid:this.data.jgid,cdjgmc:this.data.jgmc,yynr:val}
      this.$loading = true;
      $.get('/dafwgl/kyyCx',{params:data}).then((result) => {
        var res = result.returnData;
        this.$loading = false
          // this.$refs.form.errorMsg = "发照日期不能为空！"
        if (res.executeResult == '1') {
          this.timeflag = true;
          this.yytimeList = res.kyyjl;
          this.tip = res.bssd.replace(/&nbsp;/g,"")
          this.yynrList.filter((item,i)=>{
            if (item.id == val) {
              this.yyrs = item.mc
            }
            return this.yyrs
          })
          this.yyrsflag = true
        } else {
          this.timeflag = false;
          this.data.yynr = ''
          this.$alert({
            type: 'warning',
            message: res.message
          });
          this.yyrsflag = true
        }
      }).finally(() => {
      this.$loading = false;
    });
    }
  },
  methods: {
    goBack(){
      this.$router.go(-1);
    },
    // 查询预约机构
    GET_jygzCx() {
      $.get('/dafwgl/jgCx').then((res) => {
        this.yyjgList = res.returnData.jgxx;
      });
    },
    // 下一步操作
    nextStep() {
      this.data.swxw = this.yysj.period == "上午" ? "AM" :"PM"
      this.data.yyrq = this.yysj.date
      if (this.data.jgid === '') {
        this.$refs.form.errorMsg = "请选择预约机构！"
        return false;
      }
      if (this.data.yynr === '') {
        this.$refs.form.errorMsg = "请选择预约内容！"
        return false;
      }
      // if(this.data.yyrq === undefined){
      //   this.$refs.form.errorMsg = "请选择预约日期！"
      //   return false;
      // }
      this.$loading = true;
      $.post('/dafwgl/yyBc', this.data).then((res) => {
        const data = res.returnData;
        if (parseInt(data.executeResult, 10) === 1 && this.data.yynr === "04") {
          this.save = {
            type: 'success',
            btnText: '知道了',
            btnType: 'primary',
            title: '申请成功！',
            visible: true
          };
          this.msgTitle = data.message;
        }else if (parseInt(data.executeResult, 10) === 1 && this.data.yynr !== "04") {
          this.save = {
            type: 'success',
            btnText: '查看服务指南',
            btnType: 'primary',
            title: '申请成功！',
            visible: true
          };
          this.msgTitle = data.message;
        } else {
          this.save = {
            type: 'fail',
            btnText: '重新选择',
            btnType: 'gray',
            title: '申请失败！',
            visible: true
          };
          this.msgTitle = data.message;
        }
      }).finally(() => {this.$loading = false});
    },
    // 查看服务指南 // 成功
    msgBtn() {
      if (this.save.btnText == '知道了') {
        this.$router.push({ name: 'index'})
      }
      if (this.save.btnText == '查看服务指南') {
        this.$router.push({ name: 'search'})
      }
    },
    // 点击×返回到首页
    iconCloseClick() {
      this.$router.push({ name: 'dayydayy'})
      // if (this.save.type) {
        // this.save.visible = false;
      // }
    }
  },
  created() {
    this.GET_jygzCx();
  }
};
</script>
<style lang="scss" scoped>
  @import '~common/scss/variable.scss';
  .choice {
    border: $border;
    padding-left: $padding-base;
    background-color: #fff;
    border: $border;
  }
  .next-step {
    margin-top: $margin-base * 5;
    margin-bottom: $margin-base * 4;
    width: 100%;
    box-sizing: border-box;
    padding: $padding-base;
    .btn {
      width: 100%;
    }
  }
  .yyrs{
    font-size: $font-size-large;
    text-align: left;
    border-bottom: 1px solid #dbdbdb;
    padding: 0.59259rem 0.59259rem 0.59259rem 0;
  }
  ._title {
    line-height: 1.5;
    font-size: $font-size-large;
    text-align: center;
    padding: $padding-base/2 0 $padding-base;
    border-bottom: 1px solid $color-border;
    font-weight: bolder;
  }
</style>
